<template>
  <div class='container'>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">用户名:</span>
        <el-input class='flex-1' v-model="name_value"></el-input>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 管理员登录后台的用户名，请填写英文字母，数字或下划线，在4-20个字符之间</span>
      </div>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">密码:</span>
        <el-input class='flex-1'></el-input>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 管理员登录后台的密码，请填写英文字母，数字或下划线，在6-32个字符之间</span>
      </div>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">重复密码:</span>
        <el-input class='flex-1'></el-input>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 重复输入管理员登录后台的密码</span>
      </div>
    </div>
    <div>
      <div class='app-row m-30-t'>
        <span class="title bold width-100 align-right">角色:</span>
        <el-select class='flex-1' v-model="role_value" placeholder="请选择">
          <el-option
            v-for="item in role_list"
            :key="item.name"
            :value="item.name">

          </el-option>
        </el-select>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 为管理员分配一个角色码</span>
      </div>
      <el-button class="m-114-l m-20-t" @click="add_role">添加角色</el-button>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">Email:</span>
        <el-input class='flex-1'></el-input>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>联系此管理员的email邮箱地址</span>
      </div>
    </div>

    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>

  </div>
</template>

<script>
  import manager_request from "@/api/manager_request"
  import role_request from "@/api/role_request"
  export default {
    name: 'manager_add',
    data() {
      return {
        role_value: "",
        role_list: [],
        name_value: ""

    }
    },
    created() {
      this.get_detail(this.$route.query.id)
      this.get_role_list()
    },
    mounted() {
  
    },
    methods: {
      edit_button() {
        let params = {
          admin_name: this.name_value,
          id: this.$route.query.id
        }
        manager_request.edit_manager(params, res=> {
          console.log(res);
          this.$router.push('/system/manager')
        })
      },
      get_detail(id) {
        manager_request.detail_manager({id}, res=> {
          let result = res.data
          this.name_value = result.admin_name
        })
      },
      choose_goods() {
        this.choose_dialog = true
      },
      confirm_button() {
        this.choose_dialog = false
        this.setting_goods = true
      },
      add_role() {
        this.$router.push("/system/role_add")
      },
      get_role_list() {
        role_request.role_list({}, res => {
          console.log(res);
          this.role_list = res.data
        })
      }

    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>